<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跑帮郎</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    {include file="public/resource"/}
</head>
<body>
    <style>
        .header-a{
            float: left;
            text-align: center;
            width: 30%
        }
    </style>

    <!--侧滑菜单容器-->
    <div class="mui-off-canvas-wrap mui-draggable">

        <!--菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper" style="background: #fff">

                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td height="200" align="center" colspan="4">
                                <img id="headimg" style="width:180px; height:180px;margin-top: 10px; border-radius:50%;">
                            </td>
                        </tr>
                        <tr>
                            <td height="30" align="center" valign="top" colspan="4">
                                <form id="form" method="post" enctype="multipart/form-data" target="iframe" onsubmit="subt()">
                                    <input type="file" style="display: none" id="file" name="headimg" accept="image/*">
                                    <input type="text" id="name" name="name" readonly style="text-align: center; border: none;display:block;width: 70%;float:left;">
                                    <select id="sex" style="display: block; width: 30%;float:left;color: orange" name="sex" onchange="$('form').submit();">
                                        <option value="0">女</option>
                                        <option value="1">男</option>
                                        <option value="2">保密</option>
                                    </select>
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td height="10" align="center" bgcolor="#ececf2" colspan="4"></td>
                        </tr>
                        <tr id="order_tr">
                            <td width="10">&nbsp;</td>
                            <td width="70%" height="50">
                                <span class="mui-icon mui-icon-paperplane" style=" color:#ff8502"></span> 发单列表
                            </td>
                            <td width="30%">
                                <div class="mui-icon mui-icon-arrowright" style="color: #ccc; float: right; margin-right: 5px; font-size: 18px"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </aside>
        <iframe name="iframe" style="display: none;"></iframe>

        <!-- 主界面 -->
        <div class="mui-inner-wrap" id="wrap">
            <div id="layer" style="background: #000;opacity: 0.6;width: 100%;height: 100%; position: absolute; z-index: 99999;display: none;"></div>
            <header class="mui-bar mui-bar-nav" style="line-height: 50px;background: #fff">
                <a id="show_menu" class="header-a" style="width: 10%;color: #000;">
                    <i class="mui-icon mui-icon-contact mui-pull-left"></i>
                </a>
                <a id="shop" class="header-a">帮买</a>
                <a id="ship" class="header-a">帮送、取</a>
                <a id="help" class="header-a">帮忙</a>
            </header>
            <div id="container"></div>
        </div>
    </div>

    <script>
        if(token == null || token == ''){
            localStorage.setItem('token','{$token}');
        }

        if(token == ''){
            alert('用户信息异常');
            location = '__ROOT__/wxapp/login';
        }

        var wrap = mui('.mui-off-canvas-wrap').offCanvas();

        document.getElementById('wrap').addEventListener('drag', function(event) {
            event.stopPropagation();
        });

        document.getElementById('offCanvasSide').addEventListener('drag', function(event) {
            event.stopPropagation();
        });

        document.getElementById('layer').addEventListener('tap',function () {
            wrap.toggle();
            $('#layer').hide();
        });

        document.getElementById('show_menu').addEventListener('tap',function () {
            wrap.toggle();
            $('#layer').show();
        });

        document.getElementById('shop').addEventListener('tap',function () {
            location = '__URL__/help?type=shop';
        });

        document.getElementById('ship').addEventListener('tap',function () {
            location = '__URL__/help?type=ship';
        });

        document.getElementById('help').addEventListener('tap',function () {
            location = '__URL__/help?type=help';
        });

        document.getElementById('headimg').addEventListener('tap',function () {
            $('#file').click();
        });

        document.getElementById('order_tr').addEventListener('tap',function () {
            location = '__URL__/help?type=order_list';
        });

        document.getElementById('file').addEventListener('change',function () {
            $('#headimg').attr('src',getFileUrl('file'));
            $('#form').submit();
        });

        function getFileUrl(sourceId) {
            var url;
            if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                url = document.getElementById(sourceId).value;
            } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }else{
                url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
            }
            return url;
        }

        document.getElementById('name').addEventListener('click',function () {
            var edit_name = $('#name').val();
            layer.open({
                title: '编辑昵称',
                content: '<textarea id="edit_text" style="margin-left: -18px;">'+edit_name+'</textarea>',
                btn: ['确认', '取消'],
                yes: function(index){
                    if($('#file').val() == ''){
                        $('#file').remove();
                    }
                    $('#name').val(document.getElementById('edit_text').value);
                    layer.close(index);
                    $('#form').submit();
                }
            });
        });

        var loading = layer.open({type: 2});
        var listen_address = null;

        //线程监听
        function listen() {
            if(lng != null && lat != null ){
                window.clearInterval(listen_address);
                start();
            }
        }

        $(document).ready(function () {
            get_location();

            listen_address = window.setInterval('listen()',1000);
            $.ajax('__ROOT__/app/user/get_info?token=+'+token,{
                success:function (json) {
                    $('#sex').val(json.data.sex);
                    $('#name').val(json.data.name);
                    $('#headimg').attr('src',json.data.headimg);
                }
            });

        });

        function start(){
            get_express();

            map = new AMap.Map('container', {
                resizeEnable: true,
                center: [lng,lat],
                zoom: 16
            });
            addMarker(lng,lat,true);

            layer.close(loading);
        }

        function get_express() {
            $.ajax(domain+express_nearby_list,{
                type:"POST",
                data:'lng='+lng+'&lat='+lat+'&area='+area,
                timeout: 10000, //超时时间设置为10秒
                success:function (json) {
                    if(json.state == 0){
                        layer.msg(json.msg);
                    }else{
                        var data = json.data;
                        for (var i in data){
                            addMarker(data[i].lng,data[i].lat,false);
                        }
                    }
                }
            });
        }

        function subt() {
            $('#form').attr('action','__ROOT__/app/user/save_info?token='+token);
            layer.open({
                content: '修改成功',
                skin: 'msg',
                time: 2 //2秒后自动关闭
            });
        }
    </script>
</body>
</html>